import Grid from "../../../../../../frappe/frappe/public/js/frappe/form/grid";
import NewGridRow from "./grid_row";

export default class NewGrid extends Grid {
    setup_visible_columns() {
		if (this.visible_columns && this.visible_columns.length > 0) return;

		this.user_defined_columns = [];
		this.setup_user_defined_columns();
		var total_colsize = 1,
			fields =
				this.user_defined_columns && this.user_defined_columns.length > 0
					? this.user_defined_columns
					: this.editable_fields || this.docfields;

		this.visible_columns = [];

		for (var ci in fields) {
			var _df = fields[ci];

			// get docfield if from fieldname
			df =
				this.user_defined_columns && this.user_defined_columns.length > 0
					? _df
					: this.fields_map[_df.fieldname];

			if (
				df &&
				!df.hidden &&
				(this.editable_fields || df.in_list_view) &&
				((this.frm && this.frm.get_perm(df.permlevel, "read")) || !this.frm) &&
				!in_list(frappe.model.layout_fields, df.fieldtype)
			) {
				if (df.columns) {
					df.colsize = df.columns;
				} else {
					this.update_default_colsize(df);
				}

				// attach formatter on refresh
				if (
					df.fieldtype == "Link" &&
					!df.formatter &&
					df.parent &&
					frappe.meta.docfield_map[df.parent]
				) {
					const docfield = frappe.meta.docfield_map[df.parent][df.fieldname];
					if (docfield && docfield.formatter) {
						df.formatter = docfield.formatter;
					}
				}

				total_colsize += df.colsize;
				// if (total_colsize > 11) return false;
				this.visible_columns.push([df, df.colsize]);
			}
		}

		// redistribute if total-col size is less than 12
		var passes = 0;
		while (total_colsize < 11 && passes < 12) {
			for (var i in this.visible_columns) {
				var df = this.visible_columns[i][0];
				var colsize = this.visible_columns[i][1];
				if (colsize > 1 && colsize < 11 && frappe.model.is_non_std_field(df.fieldname)) {
					if (
						passes < 3 &&
						["Int", "Currency", "Float", "Check", "Percent"].indexOf(df.fieldtype) !==
							-1
					) {
						// don't increase col size of these fields in first 3 passes
						continue;
					}

					this.visible_columns[i][1] += 1;
					total_colsize++;
				}

				if (total_colsize > 10) break;
			}
			passes++;
		}
	}

	make_head() {
		if (this.prevent_build) return;

		// labels
		if (this.header_row) {
			$(this.parent).find(".grid-heading-row .grid-row").remove();
		}
		this.header_row = new NewGridRow({
			parent: $(this.parent).find(".grid-heading-row"),
			parent_df: this.df,
			docfields: this.docfields,
			frm: this.frm,
			grid: this,
			configure_columns: true,
		});

		const elems=$(this.parent).find(".grid-heading-row .grid-row div[data-fieldname] ");
		$(elems).find('.static-area ').append('<span>></span>');
		const updownElems=$(elems).find('.static-area span');
		updownElems.click((ev)=>{
			const rowElem = ev.target.parentNode.parentNode;
			const fieldName = $(rowElem).attr('data-fieldname');
			this.filterName = fieldName;

			const parentElem = $(ev.target).parents('.form-grid-container');

			const left = $(parentElem[0]).offset().left;
			const dialogElem = 
				`<div class="dt-dropdown__list" style="left: ${ev.pageX-parseInt(left)}px; top: 40px;">
					
					<div class="dt-dropdown__list-item" data-index="0">升序</div>
				
					<div class="dt-dropdown__list-item" data-index="1">倒序</div>
				
					<div class="dt-dropdown__list-item" data-index="2">重置排序</div>
				
				</div>`
			const dropdownElem = $(parentElem[0]).find('.dt-dropdown__list');

			if(!dropdownElem.length){
				$(parentElem[0]).append(dialogElem);
				$(parentElem[0]).find('.dt-dropdown__list').mouseleave(()=>{
					$(parentElem[0]).find('.dt-dropdown__list')[0].style.display="none"
				});
			}else{
				$(parentElem[0]).find('.dt-dropdown__list')[0].style.display="block"
			}
			const dropdowElems = $(parentElem[0]).find('.dt-dropdown__list')[0];
				
			dropdowElems.style.left = (ev.pageX-parseInt(left))+'px';
			const order = {
				0:'desc',
				1:'aesc',
				2:''
			};
			$(dropdowElems).delegate('.dt-dropdown__list-item','click',(ev)=>{
				const index=$(ev.target).attr('data-index');
				console.log(index);
				this.filterSort=order[index];
				this.refresh();
			});
		});

		this.header_search = new NewGridRow({
			parent: $(this.parent).find(".grid-heading-row"),
			parent_df: this.df,
			docfields: this.docfields,
			frm: this.frm,
			grid: this,
			show_search: true,
		});
		this.header_search.row.addClass("filter-row");
		if (this.header_search.show_search || this.header_search.show_search_row()) {
			$(this.parent).find(".grid-heading-row").addClass("with-filter");
		} else {
			$(this.parent).find(".grid-heading-row").removeClass("with-filter");
		}

		this.filter_applied && this.update_search_columns();
	}

	render_result_rows($rows, append_row) {
		let result_length = this.grid_pagination.get_result_length();
		let page_index = this.grid_pagination.page_index;
		let page_length = this.grid_pagination.page_length;
		if (!this.grid_rows) {
			return;
		}
		for (var ri = (page_index - 1) * page_length; ri < result_length; ri++) {
			var d = this.data[ri];
			if (!d) {
				return;
			}
			if (d.idx === undefined) {
				d.idx = ri + 1;
			}
			if (d.name === undefined) {
				d.name = "row " + d.idx;
			}
			let grid_row;
			if (this.grid_rows[ri] && !append_row) {
				grid_row = this.grid_rows[ri];
				grid_row.doc = d;
				grid_row.refresh();
			} else {
				grid_row = new NewGridRow({
					parent: $rows,
					parent_df: this.df,
					docfields: this.docfields,
					doc: d,
					frm: this.frm,
					grid: this,
				});
				this.grid_rows[ri] = grid_row;
			}

			this.grid_rows_by_docname[d.name] = grid_row;
		}
	}
}

